<template>
  <div class="w-full h-full bg-[#f4f5f7]">
    <div class="h-[calc(100%-60px)] flex items-center justify-center">
      <div
        class="w-[444px] flex flex-col items-center rounded-[12px] bg-white shadow-lg shadow-gray-500/50"
      >
        <div class="pt-[20px] pb-[10px]">登录</div>
        <el-form ref="ruleFormRef" :model="loginForm" status-icon label-width="auto">
          <el-form-item label="账号:" prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入账号"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="授权码:" prop="authCode">
            <el-input
              v-model="loginForm.authCode"
              placeholder="请输入密码"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-button class="w-full" type="primary" @click="submitForm"> 登录 </el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="w-full" type="primary" @click="logout"> 退出 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRaw } from "vue";

const loginForm = reactive<{
  username: string;
  password: string;
  authCode?: string;
}>({
  username: "admin",
  password: "123456",
  authCode: ""
});

async function submitForm() {
  console.log("登录", toRaw(loginForm));
  // const data = await window.api.invoke('Login', toRaw(loginForm))
  window.api.invoke("puppeterBrowser");
  // console.log(data)
}

async function logout() {
  console.log("退出");
  await window.api.invoke("logout");
}
</script>
